<!--异常拍照-->
<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch"
    :isCheckbox="true" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
    <div class="common-table-tree-wrapper">
      <!-- <table-tree :isCheckbox="true" :isNeedTree="isNeedTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
      </table-tree> -->

      <div class="common-table-wrapper">
        <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a class="ake_btn ake_btn_text" v-if="isPermmited('PARKING_OPERATION:PARK_ABNORMAL_PIC_CAR:EXPORT')" @click.prevent="exportData()">导出</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else-if="'carCodePhotoUrl' == props.prop">
                  <span v-if="!scope.row['carCodePhotoUrl'] && !scope.row['carPhotoUrl']">暂无图片</span>
                  <a v-else-if="!scope.row['carCodePhotoUrl'] && scope.row['carPhotoUrl']" class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['carPhotoUrl'])">查看大图</a>
                  <a v-else-if="scope.row['carCodePhotoUrl'] && !scope.row['carPhotoUrl']">
                    <img class="carNoImageUrl" style="width: 60px;height:30px;" alt="暂无" :src="scope.row['carCodePhotoUrl']" @error="handleImg($event,scope.row)"/>
                  </a>
                  <a v-else class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['carPhotoUrl'])">
                    <img class="carNoImageUrl" style="width: 60px;height:30px;" alt="暂无" :src="scope.row['carCodePhotoUrl']" @error="handleImg($event,scope.row)"/>
                  </a>
                  <img class="carImageUrl" style="width: 60px;height:30px;display:none" alt="暂无图片" :src="scope.row['carPhotoUrl']" @error="handleImg($event,scope.row)"/>
                </span>
                <span class="row-href" v-else-if="'carCode'==props.prop && (scope.row.supportVirtualCarcode || scope.row[props.prop].indexOf('智')>-1)"  @click.prevent="checkBindingCarCode(scope.row,'bindingCarCodeModal')">{{ scope.row[props.prop] }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <big-pic-modal ref="bigPicModal">
      <img slot="bigImgSlot" :src="bigImgPath | setImgPath" alt="" @error="imgError('../../', 'car', $event)">
    </big-pic-modal>

    <!-- 展示已绑定的车牌号 -->
    <basic-modal ref="bindingCarCodeModal" width="500" customeClass="">
        <h3 slot="title">车牌号</h3>
        <div class="modal-body" slot="modal-body">
          <p v-for="(item,index) in bindingCarCodeList">
            <span>逻辑卡号{{index+1}}：</span>
            <span>{{item.carCode}}</span>
            <span>({{item.cardCode}})</span>
          </p>
        </div>
        <div class="modal-footer" slot="modal-footer"></div>
    </basic-modal>
  </div>
</template>

<script>
import common from '@mixins/common.js'
import stardardList from '@mixins/tables/stardardList.js'

//modal
import invokeModal from '@mixins/modal/invokeModal.js'
import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
import images from '@mixins/image.js'

// 引进vue的js
import park_abnormal_pic_car from './js/park_abnormal_pic_car.js'
export default {
  name: 'parkAbnormalPicCar',
  mixins: [common, stardardList, invokeModal, images, park_abnormal_pic_car],
  components: {
    BigPicModal
  },
  data() {
    const today = [new Date(moment().format('YYYY-MM-DD 00:00:00')), new Date(moment().format('YYYY-MM-DD 23:59:59'))];

    return {
      fixedCols: 3,
      total: 0,
      paramName: 'parkIds',
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        { type: 'text', isShow: false, name: 'channelName', text: '通道名称', value: '' },
        // { type: 'text', isShow: false, name: 'carCode', text: '车牌号码', value: '' },
        { //复合型输入框
          isShow: false,
          type: "mixedInput",
          name: "carCode",
          text: "",
          value: "carCode",
          inputVal:"",
          style: { width: "70px" },
          isHandleChange: true,
          btnFlag: 'logicCardCode',
          options: [
            { name: "车牌号", value: "carCode" },
            { name: "逻辑卡号", value: "logicCardCode" },
            { name: "卡面号码", value: "faceCardCode" }
          ]
        },
        {
          type: 'select', isShow: true, name: 'channelType', text: '通道类型', value: '', options: [
            { name: '全部', value: '' },
            { name: '进场通道', value: '1' },
            { name: '离场通道', value: '2' },
          ], style: { width: '230px' }
        },
        { type: 'datePicker', isShow: false, name: 'query_time', text: '拍照时间', propName: 'photoTimeFrom,photoTimeTo', value: today, style: { width: '360px' } }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 64 },
        { index: 1, isShow: false, prop: 'carCodePhotoUrl', text: '车牌图片', sortable: true, minWidth: 120 },
        { index: 2, isShow: false, prop: 'carCode', text: '车牌号', sortable: true, minWidth: 160 },
        { index: 3, isShow: false, prop: 'parkName', text: '停车场', sortable: true, minWidth: 150 },
        { index: 4, isShow: false, prop: 'photoTime', text: '拍照时间', sortable: true, minWidth: 180 },
        { index: 5, isShow: false, prop: 'channelTypeStr', text: '通道类型', sortable: true, minWidth: 120 },
        { index: 6, isShow: false, prop: 'channelName', text: '通道名称', sortable: true, minWidth: 120 },
      ],
      tbodysInfo: []
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
</style>
